<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
    <div id="app">
        <el-upload
                action="../../other/common/upload"
                :on-success="handleSuccess"
                :show-file-list="false"
                :on-error="handleError">
            <el-button style="margin-left: 400px;margin-top: 40px" slot="trigger" size="small" type="primary">选择文件</el-button>
        </el-upload>
        <el-table
                style="margin-left: 400px;margin-top: 40px"
                :data="pic"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="pic"
                    label="首图"
                    width="180">
                <template slot-scope="scope" style="width: 200px; height: 100px;">
                    <img  :src=`../../${scope.row.pic}` alt="" style="width: 150px; height: 75px;object-fit: revert">
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="180">
                <template slot-scope="scope">
                    <span>{{scope.row.status==1?'可用':'不可用'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-popconfirm
                            title="你确定要禁用该广告？" @confirm="delConfirm(scope.row)">
                        <el-button slot="reference" type="danger">禁用</el-button>
                    </el-popconfirm>
                    <el-popconfirm
                            title="你确定要启用该广告？" @confirm="keConfirm(scope.row)">
                        <el-button slot="reference" type="success">启用</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>


        <!--分页-->
        <div class="block" style="margin-left: 700px;margin-top: 30px">
            <el-pagination
                    layout="prev, pager, next"
                    :page-size="page.size"
                    @current-change="changPage"
                    :total="page.total">
            </el-pagination>
        </div>
    </div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            page:{page:1,size:6,total:0},
            pic:'',
        },
        created(){
            this.getAllPic();
        },
        methods:{
            //查找图片
            getAllPic(){
              axios.get(`../../other/advertising/getAllPic?page=${this.page.page}&size=${this.page.size}`).then(res=>{
                  this.pic=res.data.data.records;
              })
            },
            delConfirm(row){
                axios.post(`../../other/advertising/updateAder?status=${-1}`,row).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message)
                    }
                    this.getAllPic();
                })
            },
            keConfirm(row){
                axios.post(`../../other/advertising/updateAder?status=${1}`,row).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message)
                    }
                    this.getAllPic();
                })
            },
            handleSuccess(response){
                if(response.code==1){
                    axios.get(`../../other/advertising/addAdver?pic=${response.data}`).then(res=>{
                        this.getAllPic();
                    })
                }
            },
            handleError(){

            },
            //分页
            changPage(page){
                this.page.page=page;
                this.getAllPic();
            },
        }
    })
</script>
</body>
</html>